<template>
    <div style="width: 100%;height:50vh;display: flex;justify-content: center;">
        <div class="info_body">
            <div class="header">
                <el-avatar icon="el-icon-user-solid" style="width: 10vw;height: 10vw;" shape="circle"
                    :src="base_url + admin_info.avatar" fit="fill"></el-avatar>
            </div>

            <div class="base_info">
                <div class="name">-{{ admin_info.username }}-</div>
                <div class="introduce">{{ admin_info.famous_sentence }}</div>
                <div class="category">
                    <div class="item"><span>{{ total.essay_count[0].count }}</span><span>文章</span></div>
                    <div class="item"><span>{{ total.essay_count[1].count }}</span><span>日常</span></div>
                    <div class="item"><span>{{ total.speak_count }}</span><span>说说</span></div>
                </div>
                <div class="love">
                    <div class="love_item"><span>爱国 敬业 诚信 友善</span></div>
                    <div class="love_item"><span>自由 平等 公正 法制</span></div>
                    <div class="love_item"><span>富强 民族 文明 和谐</span></div>

                </div>
                <div class="intruduce_self">
                    <span>{{ admin_info.introduce }}</span>
                </div>

            </div>
            <div class="tips">
                <div class="tips_item" v-for="item in admin_info.tags" :key="item.id">
                    <div style="width: 1px;height: 2vw;background-color: #000;font-weight: bold;"></div>
                    <span style="font-weight: bold;">{{ item.title }}</span>
                </div>

            </div>
            <div class="link">
                <div class="link_item">


                    <a :href="admin_info.bilibili" target="_blank">
                        <img src="../../assets/svg/User/bilibili.svg" alt="">
                        <span>bilibili</span>
                    </a>
                </div>
                <div class="link_item">
                    <a :href="admin_info.gitee" target="_blank">
                        <img src="../../assets/svg/User/gitee.svg" alt="">
                        <span>gitee</span>
                    </a>
                </div>
                <div class="link_item">

                    <a :href="admin_info.csdn" target="_blank">
                        <img src="../../assets/svg/User/csdn.svg" alt="">csdn</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { Get_admin_info, get_total } from "@/apis/web/WebApi"
import { type Admin } from "@/types/WebEssay"
const base_url = import.meta.env.VITE_APP_URL
const total = reactive<any>({
    "essay_count": [
        {
            "_id": "",
            "count": 0
        },
        {
            "_id": "",
            "count": 0
        }
    ],
    "speak_count": 20
})
const admin_info = reactive<Admin>({
    avatar: '',
    bilibili: '',
    csdn: '',
    famous_sentence: '',
    gitee: '',
    introduce: '',
    qq: '',
    role: '',
    tags: [],
    username: '',
    _id: ''

})
onMounted(() => {
    getData()
})
const getData = async () => {
    const result = await Get_admin_info()
    const result2 = await get_total()
    Object.assign(admin_info, result.data)
    Object.assign(total, result2.data)


}

</script>

<style lang="scss" scoped>
span:hover {
    text-shadow: 0 0 10px #000;
}

.info_body {
    border-radius: 10px;
    width: 40%;
    background-color: rgba(255, 255, 255, 0.5);
    height: 40vw;
    backdrop-filter: blur(6px);
    position: relative;

    .header {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        transform: translateY(-10%);

        .el-avatar {
            transition: all 1s;
        }

        .el-avatar:hover {
            transform: scale(1.3);
        }

        span {
            font-size: 1.5vw;
            font-weight: 800;
        }



    }

    .base_info {
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-evenly;
        align-items: center;
        height: 15vw;
        border-bottom: 1px solid #000;

        .name {
            margin-right: 1vw;
            writing-mode: vertical-rl;
            font-size: 2vw;
            font-weight: bold;
        }

        .name:hover {

            text-shadow: 0 0 10px #000;

        }

        .introduce {
            margin-right: 1vw;
            font-size: 1vw;
            writing-mode: vertical-rl;
            line-height: 2vw
        }

        .introduce:hover {

            text-shadow: 0 0 10px #000;

        }

        .category {
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0.5vw;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-right: 0.5vw;
                height: 100%;
                justify-content: center;
                border-left: 1px solid #000;
                padding: 0.5vw;

                span {
                    font-size: 1.5vw;
                }

                span:nth-child(2) {
                    writing-mode: vertical-rl;
                    font-weight: bold;
                    margin-top: 1vw;
                }
            }
        }

        .love {
            display: flex;

            .love_item {
                writing-mode: vertical-rl;
                font-size: 1.3vw;
                margin-right: 1vw;

                span:hover {
                    color: red;
                    font-weight: bold;
                }
            }
        }

        .intruduce_self {
            writing-mode: vertical-rl;
            font-size: 1.1vw;
            margin-right: 1vw;
            border-right: 1px solid black;
            padding-right: 1vw;
            box-sizing: border-box;

            // span {
            //     writing-mode: vertical-rl;
            // }
            span:hover {
                text-shadow: 0 0 10px #000;
            }
        }




    }

    .link {
        display: flex;
        position: absolute;
        bottom: 1vw;
        width: 100%;
        justify-content: space-evenly;

        .link_item {
            width: 12%;
            display: flex;
            flex-direction: column;
            transition: all 0.5s;


            a {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: black;
                text-decoration: none;

                img {
                    width: 2vw;
                }

                span {
                    font-weight: bold;
                }
            }




        }

        .link_item:hover {
            transform: translateY(-0.5vw);
        }
    }

    .tips {
        display: flex;
        overflow: hidden;
        justify-content: space-evenly;

        .tips_item:hover {
            transform: translateY(-10%);
        }

        .tips_item {
            margin: 0 0.5vw;
            width: 2vw;
            transition: all 1s;
            display: flex;
            flex-direction: column;
            align-items: center;

            span {

                writing-mode: vertical-rl;
                font-size: 1vw;
            }
        }
    }
}
</style>